<template>
  <van-uploader
    :disabled="disabled"
    :after-read="afterRead"
    v-model="fileList"
    :accept="accept"
    :max-size="maxSize"
    :max-count="maxCount"
    :deletable="!disabled"
    :show-upload="!disabled"
  >
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}"></slot>
    </template>
    <slot></slot>
  </van-uploader>
</template>

<script lang="ts" setup>
import { ref, watch, PropType, onMounted } from "vue";
import { compressFile } from "@/utils/util";
import { uploadImage, uploadImageOcr } from "@/api/common";
import { IDCardSide } from "@/const/emun";

const fileList = ref<any[]>([]);
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: String,
  customImg: {},
  accept: {
    type: String,
    default: "image/*",
  },
  maxSize: {
    type: Number,
    default: 5 * 1024 * 1024,
  },
  maxCount: {
    type: [String, Number],
    defaut: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  modelValueType: {
    type: String,
    default: "string", // string or array
  },
  ocr: {
    type: Boolean,
    default: false,
  },
  idCardSide: {
    type: String as PropType<IDCardSide>,
  },
});

onMounted(() => {
  console.log("modelValue", props.modelValue);
});
watch(
  () => props.modelValue,
  () => {
    if (!props.modelValue) {
      fileList.value = [];
    }
  }
);

const initFileList = (urls: string[]) => {
  fileList.value = urls.map((url: string) => {
    return { url, isImage: true, $res: { annexUrl: url } };
  });
};
const afterRead = async (fileObj: any) => {
  try {
    const file: any = await compressFile(fileObj.file);
    const formData = new FormData();

    // formData.append('customPath', '/gft-base-service/buscard');
    fileObj.status = "uploading";
    fileObj.message = "上传中...";
    // const [err, res] = await uploadImage(formData);
    if (props.ocr) {
      formData.append("image", file);
      formData.append("side", props.idCardSide as string);
      const res: any = await uploadImageOcr(formData);
      console.log(res);
      if (res.code == 200) {
        fileObj.status = "done";
        console.log("fileObj", fileObj);
        console.log(res.data);
        emits("update:modelValue", props.idCardSide, res.data);
      } else {
        fileObj.status = "failed";
      }
    } else {
      formData.append("file", file);
      const res: any = await uploadImage(formData);
      if (res.code == 200) {
        // 待补充
        fileObj.status = "done";
        fileObj.$res = res;
        console.log(fileList.value);
        let temArr = fileList.value.map((item: any) => item.$res.annexUrl);
        if (props.modelValueType === "string") {
          emits("update:modelValue", temArr.join());
        } else {
          emits("update:modelValue", temArr);
        }
      } else {
        fileObj.status = "failed";
      }
    }
  } catch (error) {
    fileObj.status = "failed";
  }
};
defineExpose({
  initFileList,
});
</script>

<style lang="less">
.van-uploader__mask {
  height: 100%;
  width: 100%;
  z-index: 9;
  top: 0;
  left: 0;
}
</style>
